<template>
  <div class="main">
    <div class="top">
        <div class="sm">
            <p class="p1">
                Browse
            </p>
            <p>
                Movies in Chennai
            </p>
        </div>
        <img src="../assets/head.png">
    </div>
    <div class="sou">
        <input type="text" placeholder="Search movies or theatres">
    </div>
    <div class="imgList">
        <div class="nav"></div>
    </div>
    <ul>
        <li v-for="ele in list" :key="ele.id">
        <img :src="ele.imgUrl">
        <p>{{ ele.tit }}</p>
    </li>
    </ul>
  </div>
</template>
<script>
import $ from 'jquery'
import { bannerAjax } from '../api/mockApi/banner'
  export default {
    data () {
      return {
        list:[]
      };
    },
    mounted() {
        this.getData();
        this.ban();
    },
    methods: {
        async getData(){
            const res = await bannerAjax({
                method:"get",
                url:"/home/banner"
            })
            this.list =res.data.data
        },
        ban(){
            var inds = $('.main>ul>li').index();
            setInterval(function(){
                if(inds===2){
                    inds = 0;
                }else{
                    inds++
                }
            $('.main>ul>li').eq(inds).css('display','block');
            $('.main>ul>li').eq(inds).siblings('.main>ul>li').css('display','none');
            },5000)
        },
    },
    computed: {}
  }
</script>
<style lang='scss' scoped>
.main{
    width: 375px;
    height: 812px;
    .top{
        width: 375px;
        display: flex!important;

        p{
            width: 250px;
            line-height: 50px;
        }
        .p1{
            font-weight: 600;
            font-size: 30px;
        }
        .sm{
            padding: 10px 40px;
            width: 250px;
        }
        img{
            width: 100px;
            height: 70px;
            margin-top: 25px;
            margin-left: 180px;
        }
    }
    .sou{
        width: 750px;
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        input{
            width: 530px;
            height: 50px;
            border:  1px solid rgb(214, 201, 202);
            border-radius: 30px;
            margin-left: -80px;
            text-indent: 2em;
        }
        input::placeholder{
            color: rgb(227, 225, 225);
            font-size: 18px;
        }

    }
    .imgList{
        width: 750px;
        .nav{
            width: 750px;
            height: 50px;
            background: url('../assets/demo_background.png') no-repeat;
            background-position: 38px 0px;
            background-size: 76%;
        }
    }
    ul{
        width: 750px;
        margin-top: 80px;
        justify-content: center;
        display: flex;
        align-items: center;
        img{
            width: 400px;
            border-radius: 20px;
        }
     
        li{
            margin-left: -50px;
            display: none;
            p{
                text-align: center;
            }
        }
        li:nth-child(1){
            display: block;
        }
    }
}
</style>